<div class="ant-card width-lg" style="margin: 0 auto;">
    <div class="ant-card-body">
        <div class="avatar">
            <nz-avatar
                [nzSrc]="settings.user.avatar"
                nzIcon="anticon anticon-user"
                nzSize="large"
            ></nz-avatar>
        </div>
        <form nz-form [formGroup]="f" (ngSubmit)="submit()" role="form" class="mt-md">
            <nz-form-item>
                <nz-form-control>
                    <nz-input-group nzSuffixIcon="anticon anticon-lock">
                        <input type="password" nz-input formControlName="password"/>
                    </nz-input-group>
                    <nz-form-explain *ngIf="f.get('password').dirty && f.get('password').errors">
                        请输入密码！
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-row nzType="flex" nzAlign="middle">
                <nz-col [nzOffset]="12" [nzSpan]="12" style="text-align:right;">
                    <button nz-button [disabled]="!f.valid" nzType="primary">锁屏</button>
                </nz-col>
            </nz-row>
        </form>
    </div>
</div>
